<template>
    <div>
        <h2>房号显示页面</h2>
        <input type="button" value="新增" class="btn btn-info" @click="add">

        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>Id</td>
                    <td>房号名称</td>
                    <td>房型名称</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list" :key="item.Id">
                    <td>{{ item.Id }}</td>
                    <td>{{ item.NumName }}</td>
                    <td>{{ item.HouseName }}</td>
                    <td>{{ item.State == 0 ? "营业" : "停业" }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.Id)">
                        <input type="button" value="营业" class="btn btn-info" v-if="item.State == 1"
                            @click="upd(item.Id, 0)">
                        <input type="button" value="停业" class="btn btn-warning" v-if="item.State == 0"
                            @click="upd(item.Id, 1)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router'
const router = useRouter();
const route = useRoute();

import moment from 'moment'

//考试结束

//删除
const del = (id: any) => {
    if (confirm('确认删除吗')) {
        axios({
            method: 'delete',
            url: '/api/HouseNum/DelNum',
            params: {
                id: id
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('成功');
                    getshow();
                }
                else {
                    alert('失败');
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}

//修改状态
const upd = (id: any, state: any) => {
    if (confirm('确认修改吗')) {
        axios({
            method: 'put',
            url: '/api/HouseNum/UpdState',
            params: {
                id: id,
                state:state
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('成功');
                    getshow();
                }
                else {
                    alert('失败');
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}

onMounted(() => {
    getshow();
})
let data: any = reactive({
    list: []
})
const getshow = () => {
    axios({
        method: 'get',
        url: '/api/HouseNum/ShowNum'
    })
        .then(res => {
            console.log(res);
            data.list = res.data;
        })
        .catch(err => {
            console.log(err);
        })
}

const add = () => {
    router.push('/add')
}

</script>

<style scoped></style>